<template>
  <div>
    <h3>上传</h3>
    <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple :limit="3"
    :file-list="fileList"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed">
    <button type="primary" size="small">点击上传</button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png图片文件格式，且文件不能超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      
      return {
       
        fileList: [],
      }
    },
    components: {

    },
    methods: {
        handlePreview(file){
          console.log(file);
        },
        handleRemove(file,fileList){
          console.log(file.fileList);
          this.$message.success("删除成功！");
        },
        handleSuccess(res,file,fileList){
          console.log(file,fileList);
          this.$message.success("上传成功！");

        },
        handleError(err,file,fileList){
          console.log(file,fileList);
          this.$message.warning('服务器异常，请联系管理员');
        },
        beforeRemove(file,fileList){
          console.log(file,fileList);0
          this.$confirm(`您确定要删除${file.name}文件吗？`);
        },
        handleExceed(files,fileList){
          console.log(files,fileList);
          this.$message.warning(`当前文件只能上传3个文件,你这次上传了${files},共上传了${files.length+fileList.length}个文件`)
        }
    }
  }
</script>

<style>
</style>
